<div class="quick-search-panel panel-anim" id="quickSearchPanel">
    <div class="quick-search-content">
        <div class="quick-search-input" @click.stop.prevent>
            <input type="text" class="layui-input" ref="searchInput" v-model="searchKey" @input="handleSearchInput" placeholder="请输入名称或ID">
        </div>
        <div class="quick-search-result">
            <div class="result-head">
                <i class="fa fa-search color-blue mr-5"></i>
                <strong v-if="searchKey == ''">搜索结果</strong>
                <strong v-if="searchKey">最近浏览记录</strong>
            </div>
            <div class="result-list">
                <!-- 候选人 -->
                <div class="result-item" v-if="searchTalent.length">
                    <div class="item-title">候选人</div>
                    <div class="item-body">
                        <ul>
                            <li v-for="item in searchTalent" :key="item.id">
                                <a href="javascript:;" class="link-content" :layuimini-href="item.url" @click="uuu">
                                    <div class="title">
                                        <span>#{{item.id}}</span>
                                        <span :style="{color: item.title.color}">{{item.title.name}}</span>
                                        <span>({{item.mobile}})</span>
                                    </div>
                                    <div class="content">
                                        <span :style="{color: item.company.color}">{{item.company.name}}</span> -
                                        <span>{{item.job}}</span>
                                    </div>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
                <!-- 订单 -->
                <div class="result-item" v-if="searchOrder.length">
                    <div class="item-title">订单</div>
                    <div class="item-body">
                        <ul>
                            <li v-for="item in searchOrder" :key="item.id">
                                <a href="javascript:;" class="link-content" :layuimini-href="item.url">
                                    <div class="title">
                                        <span>#{{item.id}}</span>
                                    </div>
                                    <div class="content">
                                        <span :style="{color: item.title.color}">{{item.title.name}}</span>
                                    </div>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
                <!-- 客户 -->
                <div class="result-item" v-if="searchClient.length">
                    <div class="item-title">客户</div>
                    <div class="item-body">
                        <ul>
                            <li v-for="item in searchClient" :key="item.id">
                                <a href="javascript:;" class="link-content" :layuimini-href="item.url">
                                    <div class="title">
                                        <span>#{{item.id}}</span>
                                    </div>
                                    <span :style="{color: item.title.color}">{{item.title.name}}</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
                <!-- 项目 -->
                <div class="result-item" v-if="searchProject.length">
                    <div class="item-title">项目</div>
                    <div class="item-body">
                        <ul>
                            <li v-for="item in searchProject" :key="item.id">
                                <a href="javascript:;" class="link-content" :layuimini-href="item.url">
                                    <div class="title">
                                        <span>#{{item.id}}</span>
                                    </div>
                                    <span :style="{color: item.title.color}">{{item.title.name}}</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    layui.use(['utils', 'miniPage'], function () {
        var $ = layui.jquery,
            miniPage = layui.miniPage,
            utils = layui.utils;
        var quickSearchPanel = new Vue({
            el: '#quickSearchPanel',
            data: function () {
                return {
                    show: false,
                    searchKey: '',
                    searchTalent: [],
                    searchOrder: [],
                    searchClient: [],
                    searchProject: []
                }
            },
            mounted: function () {
                this.$refs.searchInput.focus();
                this.loadSearchData();
                miniPage.listen();
            },
            methods: {
                loadSearchData: function () {
                    var that = this
                    utils.Ajax({
                        url: 'api/search.json',
                        dataType: 'json',
                        type: 'post',
                        data: {
                            key: this.searchKey
                        },
                        success: function (response) {
                            var data = response.data;
                            console.log(data)
                            if (Array.isArray(data.talent)) {
                                that.searchTalent = data.talent;
                                console.log(that.searchTalent)
                            }
                            if(Array.isArray(data.order)) {
                                that.searchOrder = data.order
                            }
                            if(Array.isArray(data.client)) {
                                that.searchClient = data.client
                            }
                            if(Array.isArray(data.project)) {
                                that.searchProject = data.project
                            }
                        }
                    })
                },
                handleOuterClick: function() {
                    $('.quick-search-panel').remove();
                    $('.header-right-menu').show();
                },
                handleSearchInput: _.debounce(function () {
                    console.log(this.searchKey)
                    this.loadSearchData()
                }, 600, {leading:true}),
                uuu: function () {
                    $('.quick-search-panel').hide();
                }
            }
        })
    })
</script>
